<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            overflow-x: hidden;
            width: 300px;
            height: 400px;
            outline: 1px solid salmon;
        }
        .list-item {
            height: 40px;
            outline: 1px solid seagreen;
            outline-offset: -2px;
        }
    </style>
</head>
<body>
    <div class="list">
        <div class="list-inner">
            <div class="list-item">1</div>
            <div class="list-item">2</div>
            <div class="list-item">3</div>
            <div class="list-item">4</div>
            <div class="list-item">5</div>
            <div class="list-item">6</div>
            <div class="list-item">7</div>
            <div class="list-item">8</div>
            <div class="list-item">9</div>
            <div class="list-item">10</div>
            <div class="list-item">11</div>
            <div class="list-item">12</div>
        </div>
    </div>
    <script>
        const listInner = document.querySelector('.list-inner');
        const list = document.querySelector('.list');
        listInner.innerHTML = `
            <div class="list-item">0</div>
            <div class="list-item">1</div>
            <div class="list-item">2</div>
            <div class="list-item">3</div>
            <div class="list-item">4</div>
            <div class="list-item">5</div>
            <div class="list-item">6</div>
            <div class="list-item">7</div>
            <div class="list-item">8</div>
            <div class="list-item">9</div>
            <div class="list-item">10</div>
            <div class="list-item">11</div>
            <div class="list-item">12</div>
        `
        console.log('渲染是否完成')
        // listInner.insertAdjacentHTML('afterbegin', `<div class="list-item">0</div>`);
        // listInner.style.setProperty('padding', '-40px 0 0 0')
        list.scrollTop = 40;
        // const dHeight = listEl.scrollTop - firstItem.bottom;
    </script>
</body>
</html>